<template>
  <div class="box">
    <div class="bg"></div>
    <van-nav-bar id="van-bar" :title="title" :border="border">
      <!-- <template #left>
        <img
          :style="{ width: widthPx, height: heightPx }"
          src="@/assets/iconPerfectInformation/nav_back@2x.png"
        />
      </template> -->
    </van-nav-bar>

    <van-list v-model="loading" :finished="finished" finished-text="— THE END —" @load="getData" class="glance">
      <div class="glancelist">
        <div class="list" @click="tosystem" style="
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                ">
          <div style="display: flex; align-items: center">
            <img class="headImg" src="@/assets/chat/system-message.png" alt="" srcset="" />
            <div class="userInfo">
              <p style="display: flex; align-items: center">
                <span class="name">系统通知</span>
                <span v-if="systemmessages.unread_num" class="num" style="margin-top: 2px">{{ systemmessages.unread_num
                }}</span>
              </p>
            </div>
          </div>
          <div class="left">
            <img src="@/assets/chat/arrow-right.png" alt="" srcset="" />
          </div>
        </div>
        <div class="list" v-for="(item, index) in sessionlist" :key="index" @click="tosystemInfo(item)">
          <img class="headImg" v-if="item.userInfo" :src="item.userInfo[item.key].avatarurl" alt=""
            srcset="" />
          <div class="userInfo">
            <p>
              <span class="name" v-if="item.userInfo">
                {{ item.userInfo[item.key].nickname }}
              </span>
              <span v-if="item.unread_num" class="num">{{
                item.unread_num
              }}</span>
            </p>
            <p class="userData" v-if="item.lastMessage.type=='txt'">{{ item.lastMessage.msg }}</p>
            <p class="userData" v-else>[图片]</p>
            <p class="time">{{ item.lastMessage.time }}</p>
          </div>
        </div>
        <!-- <p style="text-align: center;margin: 24px 0;color: #AAAAAA;font-size: 10px;"></p> -->
      </div>
    </van-list>
  </div>
</template>

<script>
import { getim } from '@/api/setting'
import { formatTime } from '@/utils/fun'
//导入vux
import { mapGetters, mapMutations, mapActions } from 'vuex'

export default {
  data() {
    return {
      border: '',
      widthPx: '28px',
      heightPx: '28px',
      isActive: 0,
      isshow: true,
      title: '聊天',
      appKey: '',
      username: '',
      password: '',
      isActive: 0,
      loading: true,
      finished: false,
      searchParameter: {
        pageSize: 20,
        cursor: 1,
      },
      list: [],
      userId: 'system_message_user', // 系统通知用户的id
      // SystemData: {}, // 系统信息
    }
  },
  computed: {
    ...mapGetters('list', ['systemmessages', 'sessionlist']),
  },
  mounted() {
    console.log(11111111111)
    this.$nextTick(() => {
      console.log(this.$store.state)
      if (WebIM.conn.isOpened()) {
        this.cz()
        this.getSystemData()
      } else {
        this.$store.dispatch('list/login').then(res => {
          this.cz()
          this.getSystemData()
        })
      }
    })
  },
  methods: {
    ...mapMutations('list', ['SET_INFOOBJ', 'SET_options', 'SET_messages', 'SET_sessionlist']),
    onClickLeft() {
      this.$router.back()
    },
    qiehuan(e) {
      this.isActive = e
      this.cz()
    },
    cz() {
      this.SET_sessionlist([])
      this.loading = false
      this.finished = false
      // this.getData()
    },
    async getData() {
      this.$store.dispatch('list/getConversationlist').then(res => {
        this.finished = res;
      })
      // console.log(conn)
      // conn
      //   .getConversationlist({
      //     ...this.searchParameter,
      //   })
      //   .then(async (res) => {
      //     if (res.data.channel_infos.length > 0) {
      //       console.log(res)

      //       let list = []
      //       for (
      //         let index = 0;
      //         index < res.data.channel_infos.length;
      //         index++
      //       ) {
      //         const element = res.data.channel_infos[index]
      //         let users = element.lastMessage.to
      //         element.lastMessage.time = formatTime(element.lastMessage.time)
      //         await conn.fetchUserInfoById(users).then((ress) => {
      //           element['userInfo'] = ress.data
      //         })
      //         list.push(element)
      //       }

      //       this.list = this.list.concat(list)
      //       this.searchParameter.cursor++
      //     } else {
      //       this.searchParameter.cursor--
      //     }
      //     if (res.data.channel_infos.length <= this.searchParameter.pageSize) {
      //       this.finished = true
      //     }
      //   })
      //   .catch((err) => {
      //     // this.getData();
      //   })
    },
    // 获取指定用户id的会话列表
    getSystemData() {
      this.$store.dispatch('list/getSystemData')
      // let options = {
      //   // 对方的用户 ID 或者群组 ID 或聊天室 ID。
      //   targetId: this.userId,
      //   // 每页期望获取的消息条数。取值范围为 [1,50]，默认值为 20。
      //   pageSize: 20,
      //   // 查询的起始消息 ID。若该参数设置为 `-1`、`null` 或空字符串，从最新消息开始。
      //   cursor: -1,
      //   // 会话类型：（默认） `singleChat`：单聊；`groupChat`：群聊。
      //   chatType: 'singleChat',
      //   // 消息搜索方向：（默认）`up`：按服务器收到消息的时间的逆序获取；`down`：按服务器收到消息的时间的正序获取。
      //   searchDirection: 'up',
      // }
      // conn.getHistoryMessages(options).then((res) => {
      //   // 成功获取历史消息。
      //   console.log(res)
      //   res.messages[0].time = formatTime(res.messages[0].time)
      //   this.SystemData = {
      //     ...res.messages[0],
      //     unread_num: res.messages.length,
      //   }
      // })
    },
    //跳转到聊天页面
    tosystemInfo(item) {
      console.log(item)
      this.SET_messages({
        messages:[]
      })
      this.SET_INFOOBJ(item)
      //初始化
      this.SET_options({
        // 对方的用户 ID 或者群组 ID 或聊天室 ID。
        targetId: '',
        // 每页期望获取的消息条数。取值范围为 [1,50]，默认值为 20。
        pageSize: 20,
        // 查询的起始消息 ID。若该参数设置为 `-1`、`null` 或空字符串，从最新消息开始。
        cursor: -1,
        // 会话类型：（默认） `singleChat`：单聊；`groupChat`：群聊。
        chatType: 'singleChat',
        // 消息搜索方向：（默认）`up`：按服务器收到消息的时间的逆序获取；`down`：按服务器收到消息的时间的正序获取。
        searchDirection: 'up',
      })
      this.$router.push({
        path: '/chat/index',
      })
    },
    //系统消息页面
    tosystem() {
      this.SET_INFOOBJ(this.SystemDat)
      this.$router.push({
        path: '/chat/systemInfo',
      })
    },
  },
}
</script>

<style scoped>
.active {
  position: relative;
  margin: 8px auto 0 auto;
  width: 194px;
  display: flex;
  height: 36px;
  background: #e8edfc;
  border-radius: 8px;
}

.active div {
  flex: 1;
  text-align: center;
  line-height: 36px;
  font-size: 14px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  color: #767676;
}

.isActive {
  width: 96px;
  height: 32px;
  background: #ffffff;
  border-radius: 8px;
  line-height: 32px !important;
  margin: 2px;
  color: #1a1a1a !important;
}

.setting {
  padding: 14px 16px;
  box-sizing: border-box;
  background: #e8edfc;
  width: 343px;
  height: 66px;
  margin: 0 auto;
  /* background: linear-gradient(180deg, #3764EC 0%, #6B85F7 100%); */
  border-radius: 8px;
  border: 1px solid rgba(82, 117, 241, 0.3);
}

.glance {
  /* position: absolute; */
}

.bg {
  width: 100%;
  height: 88px;
  position: absolute;
  top: 0;
  background: linear-gradient(180deg, #cde1fd 0%, rgba(255, 255, 255, 0) 100%);
}

.glancelist {
  width: 345px;
  margin: 0 auto;
}

.headImg {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 7px;
}

.num {
  display: block;
  width: 16px;
  height: 16px;
  background: #fa5151;
  border-radius: 20px;
  text-align: center;
  line-height: 16px;
  font-size: 10px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  color: #ffffff;
}

.userInfo {
  display: inline-block;
  vertical-align: top;
}

.userData {
  font-size: 12px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  color: #767676;
  margin-top: 8px;
}

.time {
  position: absolute;
  right: 0;
  top: 10px;
  font-size: 10px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  color: #aaaaaa;
}

.list {
  padding: 16px 0;
  position: relative;
  border-bottom: #d8d8d8 solid 1px;
}

.list span {
  display: inline-block;
  vertical-align: top;
}

.name {
  margin-right: 7px;
  font-size: 16px;
  font-family: AppleSystemUIFont;
  color: #1a1a1a;
  line-height: 16px;
}

.sex {
  background-color: #fcdbdb;
  border-radius: 8px;
  height: 16px;
  margin: 3px 7px;
  margin-left: 0;
  width: 38px;
  text-align: center;
  line-height: 16px;
  color: #fa5151;
}

.vip {
  margin: 3px 7px;
  margin-left: 0;
  width: 30px;
  height: 16px;
  background: linear-gradient(180deg, #e8b87a 0%, #fde0b9 100%);
  border-radius: 8px;
  text-align: center;
  line-height: 17px;
  vertical-align: top;
  font-size: 12px;
  color: #663409;
}

.left {
  float: right;
  /* margin: 13px 0; */
  width: 14px;
  /* height: 14px; */
}

.title {
  font-size: 14px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  color: #3d3d3d;
}

.vip1 {
  display: inline-block;
  margin: 3px 7px;
  width: 54px;
  height: 16px;
  background: linear-gradient(180deg, #e8b87a 0%, #fde0b9 100%);
  border-radius: 8px;
  text-align: center;
  line-height: 17px;
  vertical-align: top;
  font-size: 12px;
  color: #663409;
}

.text {
  font-size: 12px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  color: #767676;
}

.sex img {
  margin-right: 2px;
  width: 8px;
  display: inline-block;
  margin-top: 3px;
  height: 12px;
}

.sex .age {
  display: inline-block;
  vertical-align: top;
  font-size: 12px;
  margin-top: 3px;
  height: 12px;
}

.van-cell {
  background-color: transparent;
}

.van-cell::after {
  border-color: #d8d8d8;
}

.van-cell__value {
  color: #1a1a1a;
  font-weight: 500;
}

.btn {
  float: right;
  margin: 6px 0;
  text-align: center;
  width: 84px;
  height: 28px;
  border-radius: 8px;
  line-height: 28px;
  border: 1px solid #767676;
  font-size: 12px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  color: #767676;
}
</style>
